<template>
<el-dialog
    title="新增或修改"
    v-model="visible"
    :before-close="beforeClose"
    width="444px"
    >
    <div class="add-svg">
        <div class="add">
            <label>
                <input type="file" @change="choose" accept=".svg" >
                <div v-if="!form.content">
                    <i class="el-icon-circle-plus-outline"></i>
                </div>
                <div v-else class="svg">
                    <span v-html="form.content"></span>
                </div>
            </label>
        </div>
        <p v-if="form.content"><el-button @click="clearStyle" size="mini">清除style标签</el-button></p>
       <p><span>名称：</span> <el-input v-model="form.name" placeholder="请输入名称" size="mini"></el-input></p>
       <p><span>iconclass：</span> <el-input v-model="form.iconClass" placeholder="请输入iconClass,(数字、字母、下划线)" size="mini"></el-input></p>
    </div>
    <template #footer>
        <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </template>
</el-dialog>

</template>
<script>

function readFile(file){
    return new Promise((resolve,reject)=>{
        var reader = new FileReader();
            reader.readAsText(file);//发起异步请求
            reader.onload = function(){
            //读取完成后，数据保存在对象的result属性中
            resolve(this.result)
            }
    })
}

function handleDom(node,removes,removeDom){
    if(!node){
        console.log("错误的svg",node);
        return ;
    }
    // "style":true,
    removeDom =  removeDom || {"title":true};
    removes = removes || ["id","class","fill","data-name"];
    
    if(node.nodeType === 1 ){
        let nodeName = node.nodeName.toLowerCase();
        if(removeDom[nodeName]){
            let p = node.parentNode;
            p.removeChild(node)
            return ;
        }
        removes.map((key)=>{
            node.removeAttribute(key);
        });
            console.log(nodeName)
        if(nodeName == "svg"){
            node.removeAttribute("height");
            node.removeAttribute("width");
        }
        
        
        if( node.children){
            for(let i = 0; i < node.children.length; i++){
                handleDom(node.children[i]);
            }
        }
    }
    return node;
}
    
    
function search(node){
	return  node.getElementsByTagName("svg")[0];
}
import {ref,getCurrentInstance,onMounted, reactive, warn} from "vue"

import {addSvg,delSvg,updateSvg} from "@/utils/api"
export default {
    name:"add-svg",
    setup(){
        // 获取当前的上下文实例
        const {proxy:ctx} = getCurrentInstance()
        let visible =  ref(false);
        var form = reactive({})
        const open = (opts={})=>{
            visible.value = true;
            for(let i in form){
                delete form[i]
            }
            for(let i in opts){
                form[i] = opts[i];
            }
        }
        const beforeClose = (done)=>{
            ctx._promise && ctx._promise.resolve && ctx._promise.resolve();
            done();
        }
        const choose =async (e)=>{
            let file = e.target.files[0];
            e.target.value = "";
            let res = await readFile(file);
            let html = new DOMParser();
			let svg =  handleDom(search(html.parseFromString(`${res}`,"text/html").body));
            form.content = svg.outerHTML;
            let nm = file.name.split(".");
            nm.pop();
            nm = nm.join("");
            if(!form.name){
                form.name = nm;
            }
            if(!form.iconClass){
                form.iconClass = nm;
            }
        }

        const confirm = async()=>{
            let res
            if(form.ID){
                // 更新
                 res = await updateSvg(form);
            }else{
                 res = await addSvg(form);
            }
            ctx._promise && ctx._promise.resolve && ctx._promise.resolve(res);
            visible.value = false;
        }
        const clearStyle = ()=>{
            if(form.content){
                let div = document.createElement("div");
                div.innerHTML = form.content;
                let svg =  handleDom(div.children[0],undefined,{"style":true});
                form.content = svg.outerHTML;
                ctx.$message.success("清除成功");
            }
        }
        return {
            visible,
            open,
            form,
            beforeClose,
            choose,
            confirm,
            clearStyle
        }
    }
}
</script>
<style lang="scss">
.add-svg{
    .add{
        width: 120px;
        height: 120px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 100px;
        margin: 0 auto;
       
        overflow: hidden;
        input[type=file]{
            display: none;
        }
        label{
            font-size: 30px;
            display: block;
            width: 100%;
            height: 100%;
        }
        .svg{
            padding: 10px;
            background-position: 0 0,5px 5px;
            background-size: 10px 10px;
            background-image: linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),
            linear-gradient(45deg,#eee 25%,#fff 25%,#fff 75%,#eee 75%,#eee 100%);
            width: 100%;
            height: 100%;
            svg{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    >P{
        margin: 10px;
        display: flex;
        >span{
            width: 100px;
        }
    }
}
</style>